<template>
  <div id="videDom">
    <div id="filterDom">
      <div class="name">
        <label for="">姓名：</label>
        <el-input placeholder="请输入姓名" v-model="wxUserNick"></el-input>
      </div>
      <div>
        <label for="">时间：</label>
        <el-date-picker
          v-model="month"
          value-format="YYYY-MM"
          type="month"
          placeholder="选择月"
        >
        </el-date-picker>
      </div>
      <div class="status">
        <label for="">审核状态：</label>
        <el-select v-model="videoStatus" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="status">
        <label for="">风险状态：</label>
        <el-select v-model="riskStatus" placeholder="请选择">
          <el-option
            v-for="item in riskOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="search">
        <el-button type="primary" @click="getVideoListData('',1)">查询</el-button>
      </div>
    </div>
    <div id="videoList">
      <ul v-show="videoListArr.length">
        <li v-for="item in videoListArr" :key="item.videoId">
          <video class="videoSelf" controls>
            <source :src="item.wxVideoUrl" type="video/mp4" />
          </video>
          <div>
            <p>姓名：{{ item.wxUserNick }}</p>
            <p>电话：{{ item.wxUserTelephone }}</p>
          </div>
          <div v-show="item.status == 1">
            <el-button type="success" round @click="updataStatus(item, 2)"
              >通过</el-button
            >
            <el-button type="danger" round @click="updataStatus(item, 3)"
              >未通过</el-button
            >
          </div>
          <div class="che" v-show="item.status == 2">
            <el-link type="success" disabled>已通过</el-link>
          </div>
          <div class="che" v-show="item.status == 3">
            <el-link type="danger" disabled>未通过</el-link>
          </div>
        </li>
      </ul>
      <div v-show="!videoListArr.length">
        <el-empty description="暂无数据" />
      </div>
    </div>
    <div id="pageDom">
      <el-pagination
        background
        layout="total,sizes,prev, pager, next"
        :current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50]"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :total="total"
      >
      </el-pagination>
    </div>

    <el-dialog
      v-model="dialogVisible"
      title="确认"
      width="420px"
      :before-close="handleClose"
    >
      <div class="dialogDiv">
        <span>此视频确认通过吗？如确认请选择风险状态</span>
      </div>
      <div class="status">
        <label for="">风险状态：</label>
        <el-select v-model="agreeRisk" placeholder="请选择">
          <el-option
            v-for="item in agreeRiskOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogSub"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import axios from "@/utils/axios";
import { ref, reactive, onMounted, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";

const dialogVisible = ref(false);
const handleClose = () => {
  agreeRisk.value = "";
};
const wxUserNick = ref(""); // 姓名
const router = useRouter();
const videoStatus = ref(""); // 审核状态
const riskStatus = ref(""); // 风险状态
const agreeRisk = ref(""); // 审核的时候的状态
const options = reactive([
  {
    value: "",
    label: "全部",
  },
  {
    value: "1",
    label: "待审核",
  },
  {
    value: "2",
    label: "已通过",
  },
  {
    value: "3",
    label: "未通过",
  },
]);
const riskOptions = reactive([
  {
    value: "",
    label: "全部",
  },
  {
    value: "1",
    label: "无风险",
  },
  {
    value: "2",
    label: "本省存在异常报税",
  },
  {
    value: "3",
    label: "外省存在异常报税",
  },
]);
const agreeRiskOptions = reactive([
  {
    value: "",
    label: "请选择风险状态",
  },
  {
    value: "1",
    label: "无风险",
  },
  {
    value: "2",
    label: "本省存在异常报税",
  },
  {
    value: "3",
    label: "外省存在异常报税",
  },
]);
const month = ref("");
const getMonth = () => {
  var date = new Date();
  var year = date.getFullYear();
  var monthNum = Number(date.getMonth()) + 1;
  var monthZero = monthNum < 10 ? "0" + monthNum : monthNum;
  month.value = year + "-" + monthZero;
};
const pageSize = ref(10); // 每页条数
const total = ref(0); // 总条数
const videoListArr = reactive([]);
const currentPage = ref(1);
// 跳页
const handleCurrentChange = (pageNum) => {
  currentPage.value = pageNum;
  getVideoListData(currentPage.value);
};
// 更改每页显示的数量
const handleSizeChange = (pageSize) => {
  pageSize.value = pageSize;
  getVideoListData(currentPage.value);
};

const getVideoListData = (pageNum, isUserSearh) => {
  var pageNum = pageNum || 1;
  axios
    .post("api/taxVideo/selectList", {
      wxUserNick: wxUserNick.value, // 姓名
      pageNum: pageNum, //页数
      pageSize: pageSize.value, //页面显示数量
      wxVideoDate: month.value, //审核日期
      status: videoStatus.value, //审核状态 1：待审核 2：已通过 3：未通过
      riskStatus: riskStatus.value, // 风险状态
    })
    .then((res) => {
      if (res.status == 200) {
        total.value = res.data.total; // 总页数
        videoListArr.splice(0);
        res.data.list.forEach((element) => {
          videoListArr.push(element);
        });
        currentPage.value = res.data.pageNum;
        pageSize.value = res.data.pageSize;
        if (isUserSearh) {
          ElMessage.success("查询完成");
        }
      }
    })
    .catch((res) => {});
};

const isLoginTime = ref();
const isLogin = () => {
  if (sessionStorage.time) {
    var nowDate = new Date().getTime();
    if (Number(nowDate) - Number(sessionStorage.time) > 2 * 60 * 60 * 1000) {
      ElMessageBox.alert("登录过期", "提示", {
        confirmButtonText: "重新登陆",
        callback: (action) => {
          router.push({
            name: "login",
          });
        },
      });
    } else {
      // console.log("检验成功，没有超时")
      isLoginTime.value = setTimeout(() => {
        isLogin();
      }, 60 * 1000);
    }
  } else {
    clearTimeout(isLoginTime.value);
    ElMessageBox.alert("请重新登录", "提示", {
      confirmButtonText: "重新登陆",
      callback: (action) => {
        router.push({
          name: "login",
        });
      },
    });
  }
};

const updataStatusAjax = (item, status) => {
  var str = status == 2 ? "通过" : "未通过";
  axios
    .post("api/taxVideo/updateTaxAudit", {
      videoId: item.videoId, // id
      status: status, //（2：通过 3：拒绝）
      riskStatus: status == 3 ? "" : Number(agreeRisk.value),
    })
    .then((res) => {
      // console.log(res);
      if (res.status == 200) {
        ElMessage({
          message: "视频" + str,
          type: "success",
        });
        if (status == 2) {
          dialogVisible.value = false;
          agreeRisk.value = "";
        }
        getVideoListData(currentPage.value);
      }
    })
    .catch((res) => {});
};
// 审核一个视频
let agreeItem = "";
const updataStatus = (item, status) => {
  var str = status == 2 ? "通过" : "未通过";
  if (status == 2) {
    agreeItem = item;
    dialogVisible.value = true;
  } else {
    ElMessageBox.confirm("此视频确认" + str + "吗？", "确认", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        // console.log(111111)
        updataStatusAjax(item, status);
      })
      .catch(() => {});
  }
};
// 点击确定
const dialogSub = () => {
  if (agreeRisk.value == "") {
    ElMessage({
      message: "请选择风险状态",
      type: "warning",
    });
  } else {
    updataStatusAjax(agreeItem, 2);
  }
};

onMounted(() => {
  isLogin();
  if (sessionStorage.riskDate && sessionStorage.userName) {
    wxUserNick.value = sessionStorage.userName;
    month.value = sessionStorage.riskDate;
    videoStatus.value = "2";
    riskStatus.value = sessionStorage.riskStatus;
    delete sessionStorage.riskDate;
    delete sessionStorage.userName;
    delete sessionStorage.riskStatus;
  } else if (sessionStorage.date) {
    month.value = sessionStorage.date;
    delete sessionStorage.date;
  } else {
    videoStatus.value = "";
    getMonth(); // 先获取年月
  }

  getVideoListData();
});
onUnmounted(() => {
  clearTimeout(isLoginTime.value);
});
</script>
<style lang="scss" scoped>
#videDom {
  height: 100%;
}

#filterDom {
  height: 60px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: 20px;
  .status,
  .search {
    margin-left: 12px;
  }
  .name {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 256px;
    margin-right: 12px;
    .el-input {
      width: 220px;
    }
  }
}

#videoList {
  height: calc(100% - 120px);
  overflow-y: auto;
  padding: 20px;
  ul {
    overflow: hidden;
    zoom: 1;
  }
  li {
    width: 20%;
    float: left;
    height: 374px;
    margin-bottom: 5px;
  }

  .videoSelf {
    height: 300px;
  }

  .che {
    line-height: 32px;
  }
}

#pageDom {
  display: flex;
  justify-content: center;
  align-items: center;
}
.dialogDiv {
  margin-bottom: 20px;
  font-size: 16px;
}
</style>
